<!DOCTYPE html>
<html lang="zn">
  <head>
    <meta charset="UTF-8" />
    <title>学无止境</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles/index.css" />
    <link rel="stylesheet" href="./styles/resize.css" />

    <!-- axios网络请求 -->
    <script src="./lib/axios.min.js"></script>

    <!-- vue3 -->
    <script src="lib/vue.min.js"></script>

    <!-- element plus -->
    <link rel="stylesheet" href="./lib/element-plus.index.css" />
    <script src="./lib/element-plus.full.js"></script>

    <!-- md转html -->
    <script src="./lib/marked.min.js"></script>

    <!-- md-editor-v3 富文本编辑器 -->
    <!-- <link rel="stylesheet" href="./lib/md-editor-v3@4.20.1.css" />
    <script src="./lib/md-editor-v3@4.20.1.index.js"></script> -->
  </head>
  <body>
    <div class="container" id="app">
      <el-space direction="vertical" :fill="true" style="width: 100%">
        <el-card style="width: 100%">
          <el-space direction="vertical" :fill="true" style="width: 100%">
            <div v-html="markdownQuestion"></div>
            <el-button type="primary" :loading="button1Loading" @click="getInterviewQuestion">获取题目</el-button>
          </el-space>
        </el-card>

        <el-card style="width: 100%">
          <el-space direction="vertical" :fill="true" style="width: 100%">
           <!-- <div>
            <md-editor-v3 v-model="textareaAnswer" :editorId="'preview-only'" />
           </div> -->

            <el-input v-model="textareaAnswer" :autosize="{ minRows: 10, maxRows: 20 }" type="textarea" placeholder="在此处输入答案"></el-input>
            <el-button type="primary" :loading="button3Loading" :disabled="!inputQuestion" @click="getAnswer">获取答案</el-button>
            <el-button type="primary" :loading="button2Loading" :disabled="!inputQuestion" @click="checkAnswer">进行评估</el-button>
          </el-space>
        </el-card>

        <el-card style="width: 100%">
          <div v-html="markdownContent"></div>
        </el-card>
      </el-space>
    </div>

    <script src="./utils/resize.js"></script>
    <script>
      const App = {
        data() {
          return {
            message: 'Hello Element Plus',
            instance: null,
            inputQuestion: '',
            textareaAnswer: '',
            markdownContent: '<span style="display:inline-block;width:100%;text-align:center">你的答案将会在此处进行评估</span>',
            markdownQuestion: '点击按钮获取题目',
            button1Loading: false,
            button2Loading: false,
            button3Loading: false,
          };
        },
        mounted() {
          this.instance = axios.create({
            baseURL: window.location.href,
            timeout: 60000,
          });
        },
        methods: {
          /**
           * 流式展示问题内容
           */
          async showQuestion(value) {
            let words = value.split('');
            let index = 0;
            let joinWords = '';
            let timer = setInterval(() => {
              if (index < words.length) {
                joinWords += words[index];
                this.markdownQuestion = marked.parse(joinWords);
                index++;
              } else {
                clearInterval(timer);
              }
            }, 25);
          },

          /**
           * 获取面试题
           */
          async getInterviewQuestion() {
            this.button1Loading = true;
            this.inputQuestion = '';
            this.textareaAnswer = '';
            this.markdownContent = '';
            this.markdownQuestion = '正在获取题目...';
            try {
              const res = await this.instance.get('/codeAi/get-question');
              this.inputQuestion = res.data.data;
              // this.showQuestion(this.inputQuestion);
              this.markdownQuestion = marked.parse(this.inputQuestion);
            } finally {
              this.button1Loading = false;
            }
          },

          /**
           * 进行评估
           */
          async checkAnswer() {
            this.button1Loading = true;
            this.button2Loading = true;
            this.button3Loading = true;
            try {
              const res = await this.instance.post('/codeAi/check-answer', {
                question: this.inputQuestion,
                answer: this.textareaAnswer,
              });
              this.setCommentResult(res.data.data);
            } finally {
              this.button1Loading = false;
              this.button2Loading = false;
              this.button3Loading = false;
            }
          },

          /**
           * 设置评论结果
           */
          setCommentResult(markdownText) {
            this.markdownContent = marked.parse(markdownText);
          },
          /**
           * 获取答案
           */
          async getAnswer() {
            this.button1Loading = true;
            this.button2Loading = true;
            this.button3Loading = true;
            try {
              const res = await this.instance.post('/codeAi/get-answer', {
                question: this.inputQuestion,
              });
              this.textareaAnswer = res.data.data;
            } finally {
              this.button1Loading = false;
              this.button2Loading = false;
              this.button3Loading = false;
            }
          },
        },
      };

      const app = Vue.createApp(App);
      app.use(ElementPlus);
      // app.use(MdEditorV3.MdEditor)
      app.mount('#app');
    </script>
  </body>
</html>
